<script setup>
import { ref, watch } from 'vue';

const totalCount = ref(100)
const msg = ref('hello')

const person = ref({
  name: 'zhangsan',
  age: 18
})

// // 支持监听多个值
// watch([totalCount,msg], (newValue, oldValue) => {
//   console.log('totalCount',newValue, oldValue)
// })

/**
 * 侦听器第三个参数：配置对象
 *   { immediate: true }               立即触发回调
 *   { deep: true }                    深度侦听对象
 *   { immediate: true, deep: true }   立即触发回调，并且开启深度侦听
 */
// 侦听一个响应式数据
watch(totalCount, (newValue, oldValue) => {
  console.log('totalCount',newValue, oldValue)
},{immediate:true})

watch(person, (value) => {
  console.log('person',value)
},{deep:true})
</script>

<template>
<!-- 结构 -->
<h1>{{ totalCount }}</h1>
<button @click="totalCount++">点击累加</button>
<button @click="msg += '~'">{{ msg }}</button>
<p>{{ person }}</p>
<button @click="person.age++">点击加年龄</button>
</template>

<style scoped>
/* 样式 */

</style>
